<template>
  <div class="key-listener">
    <div class="key-item" :class="{ active: shift }">Shift</div>
    <div class="key-item" :class="{ active: ctrl }">Ctrl</div>
    <div class="key-item" :class="{ active: alt }">Alt</div>
    <div class="key-item" :class="{ active: command }">Command</div>
    <!-- Q 和 enter 键不是功能键，请改用 useMagicKeys   -->
    <div class="key-item">Q</div>
    <div class="key-item">Enter</div>
  </div>
</template>

<script setup lang="ts">
import { useKeyModifier } from "@vueuse/core";

defineOptions({
  name: "UseKeyModifier"
})

const shift = useKeyModifier('Shift')
const ctrl = useKeyModifier('Control')
const alt = useKeyModifier('Alt')
const command = useKeyModifier('Meta')
</script>

<style scoped lang="css">
.key-listener {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;

  .key-item {
    background: #eeeeee;
    border-radius: 4px;
    line-height: 1.5;
    padding: 10px;

    &.active {
      background:#2ECC7199;
      color: #ffffff;
    }
  }
}
</style>
